<template>
    <div class="box">
        <el-card class="l">
            <h4>调试</h4>
            <el-divider/>
            <h5>加密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="iv" v-if="false">
                        <el-input v-model="encrypt.iv"/>
                    </el-form-item>
                    <el-form-item label="key" v-if="false">
                        <el-input type="textarea" v-model="encrypt.key"/>
                    </el-form-item>
                    <el-form-item label="keyStreamSize" v-if="false">
                        <el-input v-model="encrypt.keyStreamSize"/>
                    </el-form-item>
                    <el-form-item label="待加密文本">
                        <el-input type="textarea" v-model="encrypt.text" rows="20"/>
                    </el-form-item>
                    <el-form-item label="加密结果" v-if="encrypt.result">
                        <el-input type="textarea" readonly v-model="encrypt.result"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doEncrypt('ecb')" type="primary">加密</el-button>
                    </div>
                </el-form>
            </div>

            <h5>解密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
<!--                    <el-form-item label="私钥">-->
<!--                        <el-input v-model="decrypt.privateKey"/>-->
<!--                    </el-form-item>-->
                    <el-form-item label="待解密文本">
                        <el-input type="textarea" v-model="decrypt.text"/>
                    </el-form-item>
                    <el-form-item label="解密结果" v-if="decrypt.result">
                        <el-input type="textarea" readonly v-model="decrypt.result" rows="20"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doDecrypt" type="primary">解密</el-button>
                    </div>
                </el-form>
            </div>

        </el-card>
        <el-card class="r">
            <h4>Java代码示例</h4>
            <el-divider/>
            <div style="height: 800px;">
                <code-editor ref="editor" class="editor h-100" v-model="editorContent"
                             language="java" theme="dracula" readonly></code-editor>
            </div>
        </el-card>
    </div>
</template>

<script>
    import CodeEditor from "./code-editor";
    export default {
        name: "zuc",
        components: {CodeEditor},
        data(){
            return {
                editorContent: "",
                encrypt:{
                    // privateKey: "",
                    iv:"84319aa8de6915ca1f6bda6bfbd8c766",
                    key: "3d4c4be96a82fdaeb58f641db17b455b",
                    text: "",
                    // iv:"30303030303030303030303030303030",
                    result:"",
                    keyStreamSize: 2
                    // ecbResult: "",
                    // cbcResult: ""
                },
                decrypt: {
                    iv:"84319aa8de6915ca1f6bda6bfbd8c766",
                    key: "3d4c4be96a82fdaeb58f641db17b455b",
                    // iv: "30303030303030303030303030303030",
                    // privateKey: "0B1CE43098BC21B8E82B5C065EDB534CB86532B1900A49D49F3C53762D2997FA",
                    text: "",
                    result:"",
                    // ecbResult: "",
                    // cbcResult: ""
                }
            }
        },
        async mounted() {
            var r = await import("./code/zuc")
            var code = r.default.split("\n")
                .map(e => e.trim())
                .filter(e => e)
                .join("\n")
            this.editorContent = code
            console.log(code)
        },
        methods:{
            async doEncrypt(){
                var r = await this.$post("/api/zuc/doEncrypt2", this.encrypt)
                this.encrypt.result = r.result
            },
            async doDecrypt(){
                var r = await this.$post("/api/zuc/doDecrypt2", this.decrypt)
                this.decrypt.result = r.result
            }
        }
    }
</script>

<style scoped>
    h5,h4{
        text-align: left;
    }
    .box{
        display: flex;
        flex-direction: row;
    }
    .l{
        flex: 1;
        margin: 5px;
    }
    .r{
        flex: 1;
        margin: 5px;
    }
</style>
